<script setup>
import LeftComponents from "@/components/leftComponents.vue";
import {onMounted, ref, watch} from "vue";
import Http from "@/http/http.js";
import {getImgUrl} from "@/until/tool.js";
import LeftTypeComponent from "@/views/webLayout/leftTypeComponent.vue";
import {useRouter} from "vue-router";
import NewsBanner from "@/views/news/newsBanner.vue";
const pageObj = ref({
  total: 0,
  current: 1,
  pageSize: 16,
  showTotal: true,
  showJumper: false,
  showPageSize: true,
  pageSizeOptions: [15, 30, 50, 80, 100],
})
const router = useRouter()
const typeData = ref([])
const listData = ref([])
const typeId = ref(0)
const typeName = ref("北检资讯")
onMounted((async () => {
  await getTypeData()
  await getListData()
}))

const getParams = () => {
  if (Object.keys(router.currentRoute.value.query).length > 0) {
    typeId.value = Number(router.currentRoute.value.query.typeId);
    getTypeName(typeId.value)
  }
}

const getTypeName = (typeId) => {
  typeData.value.forEach((d) => {
    if (d["TypeId"] === typeId) {
      typeName.value = d["TypeName"];
    }
  })
}


const getTypeData = async () => {
  const res = await Http.newsType()
  typeData.value = res.Data;
  console.log(38, typeData.value)
}
const getListData = async () => {
  let Obj = {current: pageObj.value.current - 1, pageSize: pageObj.value.pageSize}
  if (typeId.value > 0) {
    Obj['TypeId'] = typeId.value;
  }
  const res = await Http.news(Obj)
  listData.value = res.Data.Data;
  pageObj.value.total = res.Data["DataCount"]
  getParams()
}

function onChange(current) {
  pageObj.value.current = current;
  getListData()
}
watch(
    () => router.currentRoute.value.query,
    (value) => {
      if (value) {
        typeId.value = Number(value.typeId);
        getTypeName(Number(value.typeId))
        getListData()
      }
    },
    {
      deep: true
    }
);
</script>

<template>
   <news-banner />
  <div class="wid flex justify-between">
    <div class="win_left">
      <div class="left_title">
        <div class="left_title_top"><b>北检资讯</b> <span><icon-list color="blue"/></span></div>
        <div class="left_title_con">
          <left-type-component v-show="typeData.length>0" :type-data="typeData" type-router="news"/>
        </div>
      </div>
      <left-components/>
    </div>
    <div class="win_right">
      <div class="right_title">
        <span>{{ typeName }}</span>
      </div>
      <div>
        <div class="news_list">
          <div v-for="item of listData">
            <div class="">
              <a :href="`/newsDetail/${item.NewsId}`" :title="item.NewsTitle" target="_blank"><img :src="getImgUrl(item.NewsImg)"/></a>
            </div>
            <div class="">
              <h5><a :href="`/newsDetail/${item.NewsId}`" :title="item.NewsTitle" target="_blank">{{ item.NewsTitle }}</a></h5>
              <p>新闻内容:{{ item.NewsDescription }}</p>
              <div class="">
                <div class="">
                  <span><a href="/news/" target="_blank">行业资讯</a></span>
                  <span class="p-l-10px">2024-03-29</span>
                </div>
                <div class="">
                  <a :href="`/newsDetail/${item.NewsId}`" :title="item.NewsTitle" target="_blank" class="ckgd">查看更多</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-1/1 flex justify-center m-b-30px">
        <a-pagination hideOnSinglePage v-model="pageObj.current" :pageSize="pageObj.pageSize" :total="pageObj.total" @change="onChange" show-less-items/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.news_list {
  > div {
    display: flex; margin-bottom: 20px;margin-top: 20px;

    > div {
      &:first-child {
        width: 225px;height: 156px;overflow: hidden;

        img {
          width: 225px;height: 156px;

          &:hover {
            transition:        all 300ms ease-out 0s;
            cursor:            pointer;
            -webkit-transform: scale(1.1);
            moz-transform:     scale(1.1);
            -o-transform:      scale(1.1);
            transform:         scale(1.1);
            }
          }
        }

      &:last-child {
        padding-left: 20px;width: 100%;

        h5 {
          line-height: 46px;font-size: 20px;font-weight: 700;padding: 0;margin: 0;

          a {
            color: rgb(51, 51, 51);
            }
          }

        > p {
          line-height: 28px;font-size: 14px;color: #666;margin-bottom: 15px;
          }

        > div {
          width:     100%;
          display:   flex; justify-content: space-between;
          font-size: 12px;color: rgb(51, 51, 51);

          a {
            font-size: 12px;color: rgb(51, 51, 51);margin-left: 10px;
            }

          &:last-child {
            a {
              color:   #666;background: #fff;font-size: 13px;line-height: 26px;text-align: center;border: 1px solid #ddd;
              display: inline-block; width: 100px;border-radius: 26px;

              &:hover {
                background: #004b92;border-color: #004b92;color: #fff;
                }
              }
            }

          }
        }
      }
    }
  }
</style>
